<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SimpleView</title>
    <style>
        /* 样式重置 */
        body,p,input,div,a,li {
            margin: 0;
            list-style: none;
            border-color: #ffffff;
        }
        /* ul {
            margin: 0;
            list-style: none;
        } */
        li {
            display: inline;
        }
        /* 对input输入框设置 */
        input {
            line-height: 30px;
            border:1px solid #f4f4f4;
            border-radius: 25px;
            font-size: 20px;
            float: left;
            background-color: #f4f4f4;
        }
        /* 包含图标，搜索，购物车的div设置 */
        .menu {
            /* border: solid; */
            height: 150px;
            width: 1090px;
            margin: 0 auto;
            box-sizing: border-box;
        }
        .menu {
            margin-top: 1em;
        }

        .menu > div {
            float: left;
            width: 360px;
            height: 150px;
            margin-right: 1px;
            /* border: solid; */
            padding: 0;
            box-sizing: border-box;
        }
        .menu:nth-child(3) {
            margin-right: 0;
            border: solid;
        }
        /* 需要将logo图片纵向居中 */
        .menu > .logo {
            padding-top: 25px;
        }
        /* 导航栏中搜索栏的设置 */
        .menu > .search {
            padding-top: 35px;
        }
        /* 适当使用后代选择器 */
        .menu  .search_text {
            /* border: solid; */
            height: 50px;
            width: 356px;
            background-color: #cc9656;
            padding-left: 17px;
            padding-top: 8px;
            box-sizing: border-box;
            border-radius: 25px;
        }
        .menu  .cart {
            padding-top: 35px;
            padding-left: 100px;
        }
        .menu  .cart_img {
            border: solid;
            border-radius: 25px;
            /* border: 1px; */
            border-color: #cc9656;
            padding-left: 35px;
            width: 150px;
        }
        /* 接下来就是关于二级菜单项 */
        .menu + * {
            /* border: solid; */
            width: 1090px;
            height: 100px;
            margin: 0 auto;
        }
        .container {
            padding-top: 20px;
            box-sizing: border-box;
        }
        /* 试着将li重置在开头处 */
        .container > ul.nav::after {
            display: block;
            clear: both;
            content: "";
        }
        .container > .nav > li > .nav_son {
            float: left;
            position: relative;
            width: 100px;
            text-align: center;
            line-height: 2em;
            cursor: pointer; 
        }
        .container > .nav >li > .nav_son > ul:hover {
            background-color: #ffffff;
            color: #003262;
        }
        .container > ul.nav > li > ul.nav_son {
            position: absolute;
            color: #003262;
            display: none;
        }
        ul.nav >li:hover > ul.nav_son {
            display: block;
        }
        ul.container > .nav > li {
            margin: 20px;
            width: 100px;
        }
        
    </style>
</head>
<body>
    <!-- 最顶端的导航部分 -->
    <div class="menu">
        <!-- logo的设置 -->
        <div class="logo"><a href="https://you.163.com"><img src="./logo.jpg" alt="logo"></a></div>
        <div class="search">
            <div class="search_text">
                <input type="text" name="search_text_input">
                <a href="https://you.163.com"><img src="./search.jpg" alt=""></a>
            </div>
        </div>
        <div class="cart">
            <label>
            <div class="cart_img">
                <a href="https://you.163.com"><img src="./cart.jpg" alt="购物车"></a>
            </div>
        </label>
        </div>
    </div>
    <div class="container">
        <ul class="nav">
            <!-- 一级菜单项 -->
            <li>
              <a href="https://you.163.com"><span >首页</span></a>
              <!-- 二级菜单 -->
            </li>
            <!-- 一级菜单项 -->
            <li>
              <span>居家生活</span>
              <ul class="nav_son">
                <!-- 二级菜单开始 -->
                    <!-- <div class="2menu_son"> -->
                        <ul class="nav_son_ul">
                            <li>口碑好物</li>
                            <li>抑菌防螨</li>
                            <li>春夏好物</li>
                        </ul>
                    <!-- </div> -->
                    <!-- <div class="2menu_son"> -->
                        <ul class="nav_son_ul">
                            <li>床品件套</li>
                            <li>被枕盖毯</li>
                            <li>床垫床褥</li>
                        </ul>
                    <!-- </div> -->
              </ul>
            </li>
            <li>
                <span>服饰鞋包</span>
                <ul class="nav_son">
                  <!-- 二级菜单开始 -->
                      <!-- <div class="2menu_son"> -->
                          <ul class="nav_son_ul">
                              <li>热销</li>
                              <li>好物上新</li>
                              <li>热销爆款</li>
                          </ul>
                      <!-- </div> -->
                      <!-- <div class="2menu_son"> -->
                          <ul class="nav_son_ul">
                              <li>男装</li>
                              <li>T恤</li>
                              <li>上衣</li>
                          </ul>
                      <!-- </div> -->
                </ul>
              </li>
            <!-- 伪元素 -->
          </ul>
    </div>
    <div></div>
    <div></div>
</body>
</html>